import React, { Component } from 'react'
import '../css/cart.scss'
import axios from 'axios'
export default class Cart extends Component {
    constructor(props){
        super(props)
            this.state={
                list:[]
            }
        
    }
    componentDidMount(){
        this.getDate()
    }
    getDate(){
        axios.get('https://shopapi.smartisan.com/product/skus?ids=100047001,100061001,100060501,100060202,100061001,100060901,100060401,100060601,100061101,100061201,100062701,100063401,100061801,100059001,100052801,100023501,100059808,100059726,100059315,100059401,100059901,100061001&with_stock=true&with_spu=true').then(res=>{
            console.log(res)
            this.setState({
                list:res.data.data.list
            })
        })
    }
    render() {
        return (
            <div>
               
                <div className="cart-name">
                    <span>购物车</span>
                    <button className="cart-edit">编辑</button>
                </div>
                {/* <div className="cart-surplus">
                    <div className="cart-center">
                    <div className="img">
                    </div>
                    <h3>购物车暂无商品</h3>
                    <p>添加到购物车的商品将会显示在这里</p>
                    <button className="btn login">登录</button>
                    <button className="btn">现在选购</button>
                    </div>
                   
                </div> */}
                <div>
                    <div className="discount">
                    <i className="iconfont icon-tiaoxingma"></i>
                    <span className="discount-span">点击领取优惠劵</span>
                    <i className="iconfont icon-jiantou"></i>
                    </div>
                    <div className="commodity">
                          选中商品
                    </div>
                    <div>
                        <p>相关推荐</p>
                        <ul>
                            {
                                this.state.list.map(item=>{
                                    return <li className="recommend" key={item.id}>
                                        <img src={item.shop_info.ali_image} alt="" className="recommend-img"/>
                                        <p className="recommend-name">{item.name}</p>
                                        <p className="recommend-info">{item.shop_info.sku_mobile_sub_title}</p>
                                        <p className="recommend-price">￥{item.price}</p>
                                    </li>
                                })
                            }
                        </ul>
                    </div>
                </div>
            </div>
        )
    }
}
